<template>
  <div :class="[color,size]" @click.stop="onClick">
    <i class="icon-play"></i>
    <span>{{ txt }}</span>
  </div>
</template>

<script>
    export default {
        props: {
            color: {
                type: String,
                default: 'gray'
            },
            size: {
                type: String,
                default: 'medium'
            },
            txt: {
                type: String,
                default: '随机播放全部'
            }
        },
        methods: {
            onClick(){
                this.$emit('click')
            }
        }
    }
</script>

<style scoped lang="stylus">
@import "~common/stylus/variable"
  .yellow
    border-radius 44px
    color $color-theme
    border 2px solid $color-theme
    display flex
    padding 5px 8px
    justify-content center
    align-items center
    .icon-play
      font-size 1.5rem
      margin-right 10px
    span
      font-size $font-size-medium-x

  .gray
    border-radius 44px
    color $color-text-l
    border 2px solid $color-text-l
    display flex
    padding 5px 8px
    justify-content center
    align-items center
    .icon-play
      font-size 1.5rem
      margin-right 10px
    span
      font-size $font-size-medium-x

  .medium
    width 130px
  .large
    width 150px
  .small
    width 100px
</style>
